import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_example/pages/home_page.dart';
import 'package:flutter_example/pages/message_page.dart';
import 'package:flutter_example/pages/my_page.dart';
import 'package:flutter_example/pages/service_page.dart';

class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> {
  final Color _defaultColor = Colors.grey;
  final Color _hilightColor = Colors.blue;
  int _currentIndex = 0;
  PageController _pageController;

  @override
  void initState() {
    _pageController = PageController(initialPage: _currentIndex);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        onPageChanged: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        controller: _pageController,
        children: [
          HomePage(title: "首页"),
          ServicePage(title: "服务"),
          MessagePage(title: "消息"),
          MyPage(title: "我的")
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        unselectedLabelStyle: TextStyle(color: _defaultColor),
        selectedLabelStyle: TextStyle(color: _hilightColor),
        currentIndex: _currentIndex,
        onTap: (index) {
          _pageController.jumpToPage(index);
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: _defaultColor),
            activeIcon: Icon(
              Icons.home,
              color: _hilightColor,
            ),
            label: "首页",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.cleaning_services, color: _defaultColor),
            activeIcon: Icon(
              Icons.cleaning_services,
              color: _hilightColor,
            ),
            label: "服务",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message, color: _defaultColor),
            activeIcon: Icon(
              Icons.message,
              color: _hilightColor,
            ),
            label: "消息",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person, color: _defaultColor),
            activeIcon: Icon(
              Icons.person,
              color: _hilightColor,
            ),
            label: "我的",
          ),
        ],
      ),
    );
  }
}
